<html lang="zh-CN">

 <head>
         <script type="text/javascript" src="http://cdnjs.gtimg.com/cdnjs/libs/jquery/2.1.0/jquery.min.js"></script>
  {# Load the tag library #}
  {% load bootstrap3 %}

  {# Load CSS and JavaScript #}
  {% bootstrap_css %}
  {% bootstrap_javascript %}

  {# Display django.contrib.messages as Bootstrap alerts #}
  {% bootstrap_messages %}

 </head>
 <body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="/admin/">自动化测试用例</a>
        <div class="navbar-mod">
            <a class="navbar-brand" href="/android/">Android</a>
            <a class="navbar-brand" href="/h5/">H5</a>
            <a class="navbar-brand" href="/pc/">PC</a>
            <a class="navbar-brand" href="/interface/">接口</a>
        </div>
    </div>
   </div>
  </nav>
  <br>
  <br>
  <div class="well">
    <h2>H5测试用例</h2>
    <form method="get" action="/h5/" id="sub">
      <select name = 'table' id = 'select_list'>
      {% for table_list1 in table_list %}
          {% if table == table_list1.table %}
              <option  value ="{{table_list1.table}}" selected="selected">{{table_list1.name}}</option>
          {% else %}
              <option  value ="{{table_list1.table}}">{{table_list1.name}}</option>
          {% endif %}
      {% endfor %}
      </select>
    <div class="text">
        <a href="javascript:void(0)" onclick="Jenkins()">Go Jenkins</a>
    </div>
    </form>
    <table class='table'>
        <th width="200">Case_id</th>
        <th width="200">Case_name</th>
        <th>Url</th>
        <th>Name</th>
        <th>Action</th>
        <th>Value</th>
        <th>Expected</th>
        <th>Actual</th>
        <th>Restult</th>
        <th>Status</th>
        {% for testcase in testcase_list  %}
            <tr>{% for k in testcase  %}
                <td><div class="sty active">{{ k }}</div></td>
            {% endfor %}
            </tr>
        {% endfor %}
    </table>

  </div>
  <div class="pagination">
      <span class="step-links">
       {% if testcase_list.has_previous %}
         <a href="?page={{ testcase_list.previous_page_number }}&table={{ table }}">previous</a>
       {% endif %}
         <span class="current">
             Page {{ testcase_list.number }} of {{ testcase_list.paginator.num_pages }}.
         </span>
       {% if testcase_list.has_next %}
         <a href="?page={{ testcase_list.next_page_number }}&table={{ table }}">next</a>
       {% endif %}
      </span>
    </div>
    <style>
        .table div { word-break:break-all; word-wrap:break-word; cursor:pointer; }
        .sty.active { height:20px; overflow:hidden; }
        .container { margin-left:0px; }
        .navbar-mod { float:right; }
        .navbar-header { width:100%; }
        .container { width:100%; }
        .text {float:right;}
    </style>

    <script type="text/javascript">
        $('.table tr').click(function(){
            if($(this).find('.sty').hasClass('active')) {
                $(this).find('.sty').removeClass('active');
            } else {
                $(this).find('.sty').addClass('active');
            }
        });

        $('#sub').change(function(){
            $(this).submit();
        });

        function Jenkins() {
            var select=document.getElementById("select_list");
            var index=select.selectedIndex ;
            var selected_text = select.options[index].text;
            window.open("http://172.16.10.83/view/H5/job/H5-" + selected_text);
        }

    </script>
    <footer>
        <p align="center">&copy;Test Automation 2016 & Zhangzhiyuan</p>
    </footer>
 </body>
</html>